@import "../mixins";
.main-header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  z-index: 800;
  box-shadow: 0 5px 5px rgba(221, 221, 221, 0.22);
  ul, li {
    padding: 0;
    margin: 0;
    list-style: none
  }
  a {
    text-decoration: none
  }
  .container {
    position: relative;
  }
  .top-logo {
    vertical-align: middle;
    line-height: 70px;
    height: 70px;
    img {
      vertical-align: middle;
    }
    .logo-span {
      font-size: 22px;
      font-weight: bold;
    }
  }
  .top-menu {
    position: absolute;
    top: 0;
    left: 200px;
    z-index: 1;
    right: 0;
    > ul {
      display: flex;
      > li {
        margin: 0 10px;
        padding: 4px 15px 0;
        a {
          display: block;
          line-height: 62px;
          font-size: 14px;
          color: #333;
          &:hover {
            color: $activeColor
          }
        }
        &.active, &:hover {
          padding-top: 0;
          border-top: 4px solid $activeColor;
          a {
            color: $activeColor
          }
        }
      }
    }
  }
  .top-right {
    position: absolute;
    right: 0;
    width: auto;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
  }
}
